دسته‌بندی (Batching) در React: استراتژی‌های بهینه‌سازی به‌روزرسانی State برای اپلیکیشن‌های با کارایی بالا

React، یک کتابخانه قدرتمند جاوا اسکریپت برای ساخت رابط‌های کاربری، همواره در تلاش برای عملکرد بهینه است. یکی از مکانیزم‌های کلیدی که به کار می‌گیرد دسته‌بندی (batching) است که نحوه پردازش به‌روزرسانی‌های state را بهینه می‌کند. درک دسته‌بندی در React برای ساخت اپلیکیشن‌های کارآمد و واکنش‌گرا، به ویژه با افزایش پیچیدگی، حیاتی است. این راهنمای جامع به بررسی جزئیات دسته‌بندی در React، مزایا، استراتژی‌های مختلف و تکنیک‌های پیشرفته برای به حداکثر رساندن اثربخشی آن می‌پردازد.

دسته‌بندی (Batching) در React چیست؟

دسته‌بندی در React فرآیند گروه‌بندی چندین به‌روزرسانی state در یک رندر مجدد (re-render) است. به جای اینکه React برای هر به‌روزرسانی state کامپوننت را دوباره رندر کند، منتظر می‌ماند تا تمام به‌روزرسانی‌ها کامل شوند و سپس یک رندر واحد انجام می‌دهد. این کار به شدت تعداد رندرهای مجدد را کاهش داده و منجر به بهبود چشمگیر عملکرد می‌شود.

سناریویی را در نظر بگیرید که در آن باید چندین متغیر state را در یک event handler به‌روز کنید:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setCountA(countA + 1);
    setCountB(countB + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

بدون دسته‌بندی، این کد دو رندر مجدد را فعال می‌کرد: یکی برای setCountA و دیگری برای setCountB. با این حال، دسته‌بندی در React هوشمندانه این به‌روزرسانی‌ها را در یک رندر مجدد واحد گروه‌بندی می‌کند که نتیجه آن عملکرد بهتر است. این موضوع به ویژه هنگام کار با کامپوننت‌های پیچیده‌تر و تغییرات مکرر state قابل توجه است.

مزایای دسته‌بندی

مزیت اصلی دسته‌بندی در React، بهبود عملکرد است. با کاهش تعداد رندرهای مجدد، میزان کاری که مرورگر باید انجام دهد به حداقل می‌رسد و منجر به تجربه کاربری روان‌تر و واکنش‌گراتر می‌شود. به طور خاص، دسته‌بندی مزایای زیر را ارائه می‌دهد:

• کاهش رندرهای مجدد: مهم‌ترین مزیت، کاهش تعداد رندرهای مجدد است. این موضوع مستقیماً به مصرف کمتر CPU و زمان رندر سریع‌تر تبدیل می‌شود.
• واکنش‌گرایی بهبود یافته: با به حداقل رساندن رندرهای مجدد، اپلیکیشن به تعاملات کاربر واکنش‌گراتر می‌شود. کاربران تأخیر کمتری را تجربه کرده و رابط کاربری روان‌تری را مشاهده می‌کنند.
• عملکرد بهینه شده: دسته‌بندی عملکرد کلی اپلیکیشن را بهینه می‌کند و منجر به تجربه کاربری بهتر، به ویژه در دستگاه‌هایی با منابع محدود، می‌شود.
• کاهش مصرف انرژی: رندرهای مجدد کمتر همچنین به معنای کاهش مصرف انرژی است که یک ملاحظه حیاتی برای دستگاه‌های موبایل و لپ‌تاپ‌ها است.

دسته‌بندی خودکار در React 18 و نسخه‌های بعد

قبل از React 18، دسته‌بندی عمدتاً به به‌روزرسانی‌های state در event handler های React محدود بود. این بدان معنا بود که به‌روزرسانی‌های state خارج از event handler ها، مانند موارد داخل setTimeout، promise ها یا event handler های نیتیو، دسته‌بندی نمی‌شدند. React 18 دسته‌بندی خودکار را معرفی کرد که دسته‌بندی را به تقریباً تمام به‌روزرسانی‌های state، صرف نظر از منشأ آن‌ها، گسترش می‌دهد. این بهبود به طور قابل توجهی بهینه‌سازی عملکرد را ساده کرده و نیاز به دخالت دستی را کاهش می‌دهد.

با دسته‌بندی خودکار، کد زیر اکنون در React 18 دسته‌بندی خواهد شد:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCountA(countA + 1);
      setCountB(countB + 1);
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

در این مثال، حتی اگر به‌روزرسانی‌های state در یک callback setTimeout قرار داشته باشند، React 18 همچنان آن‌ها را در یک رندر مجدد واحد دسته‌بندی می‌کند. این رفتار خودکار، بهینه‌سازی عملکرد را ساده کرده و دسته‌بندی یکپارچه را در الگوهای مختلف کد تضمین می‌کند.

چه زمانی دسته‌بندی اتفاق نمی‌افتد (و چگونه آن را مدیریت کنیم)

با وجود قابلیت‌های دسته‌بندی خودکار React، شرایطی وجود دارد که ممکن است دسته‌بندی آنطور که انتظار می‌رود رخ ندهد. درک این سناریوها و دانستن نحوه مدیریت آن‌ها برای حفظ عملکرد بهینه حیاتی است.

۱. به‌روزرسانی‌های خارج از درخت رندر React

اگر به‌روزرسانی‌های state خارج از درخت رندر React رخ دهند (به عنوان مثال، در کتابخانه‌ای که مستقیماً DOM را دستکاری می‌کند)، دسته‌بندی به طور خودکار انجام نخواهد شد. در این موارد، ممکن است لازم باشد به صورت دستی یک رندر مجدد را فعال کنید یا از مکانیزم‌های تطبیق (reconciliation) React برای اطمینان از سازگاری استفاده کنید.

۲. کدهای قدیمی یا کتابخانه‌ها

کدبیس‌های قدیمی‌تر یا کتابخانه‌های شخص ثالث ممکن است به الگوهایی تکیه کنند که با مکانیزم دسته‌بندی React تداخل دارند. به عنوان مثال، یک کتابخانه ممکن است به صراحت رندرهای مجدد را فعال کند یا از APIهای قدیمی استفاده کند. در چنین مواردی، ممکن است نیاز به بازنویسی کد یا یافتن کتابخانه‌های جایگزینی داشته باشید که با رفتار دسته‌بندی React سازگار باشند.

۳. به‌روزرسانی‌های فوری که نیاز به رندر فوری دارند

در موارد نادر، ممکن است نیاز داشته باشید که یک رندر مجدد فوری را برای یک به‌روزرسانی state خاص اعمال کنید. این کار ممکن است زمانی ضروری باشد که به‌روزرسانی برای تجربه کاربری حیاتی بوده و نمی‌توان آن را به تأخیر انداخت. React برای این شرایط API flushSync را فراهم می‌کند (که در ادامه به تفصیل مورد بحث قرار می‌گیرد).

استراتژی‌هایی برای بهینه‌سازی به‌روزرسانی‌های State

در حالی که دسته‌بندی React بهبودهای عملکردی خودکار را فراهم می‌کند، شما می‌توانید برای دستیابی به نتایج بهتر، به‌روزرسانی‌های state را بیشتر بهینه کنید. در اینجا چند استراتژی موثر آورده شده است:

۱. گروه‌بندی به‌روزرسانی‌های State مرتبط

هر زمان که ممکن است، به‌روزرسانی‌های state مرتبط را در یک به‌روزرسانی واحد گروه‌بندی کنید. این کار تعداد رندرهای مجدد را کاهش داده و عملکرد را بهبود می‌بخشد. به عنوان مثال، به جای به‌روزرسانی چندین متغیر state جداگانه، استفاده از یک متغیر state واحد که یک شیء با تمام مقادیر مرتبط را نگه می‌دارد، در نظر بگیرید.

            
function MyComponent() {
  const [data, setData] = React.useState({
    name: '',
    email: '',
    age: 0,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

  return (
    <form>
      <input type="text" name="name" value={data.name} onChange={handleChange} />
      <input type="email" name="email" value={data.email} onChange={handleChange} />
      <input type="number" name="age" value={data.age} onChange={handleChange} />
    </form>
  );
}

            

              
                Copy
              
            
          

در این مثال، تمام تغییرات ورودی فرم توسط یک تابع handleChange واحد مدیریت می‌شود که متغیر state data را به‌روز می‌کند. این کار تضمین می‌کند که تمام به‌روزرسانی‌های state مرتبط در یک رندر مجدد واحد دسته‌بندی شوند.

۲. استفاده از به‌روزرسانی‌های تابعی

هنگام به‌روزرسانی state بر اساس مقدار قبلی آن، از به‌روزرسانی‌های تابعی استفاده کنید. به‌روزرسانی‌های تابعی مقدار state قبلی را به عنوان آرگومان به تابع به‌روزرسانی ارائه می‌دهند و تضمین می‌کنند که شما همیشه با مقدار صحیح کار می‌کنید، حتی در سناریوهای ناهمگام.

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment
    </button>
  );
}

            

              
                Copy
              
            
          

استفاده از به‌روزرسانی تابعی setCount((prevCount) => prevCount + 1) تضمین می‌کند که به‌روزرسانی بر اساس مقدار قبلی صحیح انجام می‌شود، حتی اگر چندین به‌روزرسانی با هم دسته‌بندی شده باشند.

۳. بهره‌گیری از useCallback و useMemo

useCallback و useMemo هوک‌های ضروری برای بهینه‌سازی عملکرد React هستند. آن‌ها به شما امکان می‌دهند توابع و مقادیر را memoize کنید و از رندرهای مجدد غیرضروری کامپوننت‌های فرزند جلوگیری کنید. این موضوع به ویژه هنگام ارسال props به کامپوننت‌های فرزند که به این مقادیر وابسته هستند، اهمیت دارد.

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <ChildComponent increment={increment} />
  );
}

function ChildComponent({ increment }) {
  React.useEffect(() => {
    console.log('ChildComponent rendered');
  });
  return (<button onClick={increment}>Increment</button>);
}

            

              
                Copy
              
            
          

در این مثال، useCallback تابع increment را memoize می‌کند و تضمین می‌کند که این تابع تنها زمانی تغییر می‌کند که وابستگی‌های آن تغییر کنند (در این مورد، هیچ وابستگی‌ای وجود ندارد). این کار از رندر مجدد غیرضروری ChildComponent هنگامی که state count تغییر می‌کند، جلوگیری می‌کند.

۴. Debouncing و Throttling

Debouncing و throttling تکنیک‌هایی برای محدود کردن نرخ اجرای یک تابع هستند. آن‌ها به ویژه برای مدیریت رویدادهایی که به‌روزرسانی‌های مکرر را فعال می‌کنند، مانند رویدادهای اسکرول یا تغییرات ورودی، مفید هستند. Debouncing تضمین می‌کند که تابع تنها پس از یک دوره عدم فعالیت مشخص اجرا شود، در حالی که throttling تضمین می‌کند که تابع حداکثر یک بار در یک بازه زمانی معین اجرا شود.

            
import { debounce } from 'lodash';

function MyComponent() {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    debouncedSearch(value);
  };

  const search = (term) => {
    console.log('Searching for:', term);
    // Perform search logic here
  };

  const debouncedSearch = React.useMemo(() => debounce(search, 300), []);

  return (
    <input type="text" onChange={handleInputChange} />
  );
}

            

              
                Copy
              
            
          

در این مثال، تابع debounce از کتابخانه Lodash برای debounce کردن تابع search استفاده شده است. این کار تضمین می‌کند که تابع جستجو تنها پس از اینکه کاربر به مدت ۳۰۰ میلی‌ثانیه تایپ کردن را متوقف کرد، اجرا شود و از فراخوانی‌های غیرضروری API جلوگیری کرده و عملکرد را بهبود می‌بخشد.

تکنیک‌های پیشرفته: requestAnimationFrame و flushSync

برای سناریوهای پیشرفته‌تر، React دو API قدرتمند ارائه می‌دهد: requestAnimationFrame و flushSync. این APIها به شما امکان می‌دهند زمان‌بندی به‌روزرسانی‌های state را به دقت تنظیم کرده و زمان وقوع رندرهای مجدد را کنترل کنید.

۱. requestAnimationFrame

requestAnimationFrame یک API مرورگر است که اجرای یک تابع را قبل از repaint بعدی زمان‌بندی می‌کند. این API اغلب برای اجرای انیمیشن‌ها و سایر به‌روزرسانی‌های بصری به شیوه‌ای روان و کارآمد استفاده می‌شود. در React، می‌توانید از requestAnimationFrame برای دسته‌بندی به‌روزرسانی‌های state و اطمینان از همگام‌سازی آن‌ها با چرخه رندر مرورگر استفاده کنید.

            
function MyComponent() {
  const [position, setPosition] = React.useState(0);

  React.useEffect(() => {
    const animate = () => {
      requestAnimationFrame(() => {
        setPosition((prevPosition) => prevPosition + 1);
        animate();
      });
    };

    animate();
  }, []);

  return (
    <div style={{ transform: `translateX(${position}px)` }}>
      Moving Element
    </div>
  );
}

            

              
                Copy
              
            
          

در این مثال، requestAnimationFrame برای به‌روزرسانی مداوم متغیر state position استفاده می‌شود و یک انیمیشن روان ایجاد می‌کند. با استفاده از requestAnimationFrame، به‌روزرسانی‌ها با چرخه رندر مرورگر همگام‌سازی می‌شوند که از انیمیشن‌های پرش‌دار (janky) جلوگیری کرده و عملکرد بهینه را تضمین می‌کند.

۲. flushSync

flushSync یک API در React است که یک به‌روزرسانی همگام و فوری را به DOM اعمال می‌کند. این API معمولاً در موارد نادری استفاده می‌شود که نیاز دارید اطمینان حاصل کنید یک به‌روزرسانی state فوراً در UI منعکس شود، مانند هنگام تعامل با کتابخانه‌های خارجی یا هنگام انجام به‌روزرسانی‌های حیاتی UI. از آن به ندرت استفاده کنید زیرا می‌تواند مزایای عملکردی دسته‌بندی را خنثی کند.

            
import { flushSync } from 'react-dom';

function MyComponent() {
  const [text, setText] = React.useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    flushSync(() => {
      setText(value);
    });
    // Perform other synchronous operations that rely on the updated text
    console.log('Text updated synchronously:', value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

            

              
                Copy
              
            
          

در این مثال، flushSync برای به‌روزرسانی فوری متغیر state text هر زمان که ورودی تغییر می‌کند، استفاده می‌شود. این کار تضمین می‌کند که هر عملیات همگام بعدی که به متن به‌روز شده وابسته است، به مقدار صحیح دسترسی خواهد داشت. مهم است که از flushSync با احتیاط استفاده شود، زیرا می‌تواند مکانیزم دسته‌بندی React را مختل کرده و در صورت استفاده بیش از حد، به طور بالقوه منجر به مشکلات عملکردی شود.

مثال‌های واقعی: پلتفرم تجارت الکترونیک جهانی و داشبوردهای مالی

برای نشان دادن اهمیت دسته‌بندی و استراتژی‌های بهینه‌سازی در React، دو مثال از دنیای واقعی را در نظر بگیریم:

۱. پلتفرم تجارت الکترونیک جهانی

یک پلتفرم تجارت الکترونیک جهانی حجم عظیمی از تعاملات کاربر را مدیریت می‌کند، از جمله مرور محصولات، افزودن اقلام به سبد خرید و تکمیل خرید. بدون بهینه‌سازی مناسب، به‌روزرسانی‌های state مربوط به مجموع سبد خرید، موجودی محصول و هزینه‌های ارسال می‌تواند باعث رندرهای مجدد متعدد شود و منجر به تجربه کاربری کند، به ویژه برای کاربرانی با اتصال اینترنت کندتر در بازارهای نوظهور شود. با پیاده‌سازی دسته‌بندی در React و تکنیک‌هایی مانند debounce کردن کوئری‌های جستجو و throttling به‌روزرسانی‌های مجموع سبد خرید، این پلتفرم می‌تواند به طور قابل توجهی عملکرد و واکنش‌گرایی را بهبود بخشد و تجربه خرید روانی را برای کاربران در سراسر جهان تضمین کند.

۲. داشبورد مالی

یک داشبورد مالی داده‌های بازار در لحظه، عملکرد پورتفولیو و تاریخچه تراکنش‌ها را نمایش می‌دهد. این داشبورد برای بازتاب آخرین شرایط بازار نیاز به به‌روزرسانی‌های مکرر دارد. با این حال، رندرهای مجدد بیش از حد می‌تواند به یک رابط کاربری پرش‌دار و غیرواکنش‌گرا منجر شود. با بهره‌گیری از تکنیک‌هایی مانند useMemo برای memoize کردن محاسبات سنگین و requestAnimationFrame برای همگام‌سازی به‌روزرسانی‌ها با چرخه رندر مرورگر، داشبورد می‌تواند یک تجربه کاربری روان و سیال را حتی با به‌روزرسانی‌های داده با فرکانس بالا حفظ کند. علاوه بر این، رویدادهای ارسالی از سرور (Server-Sent Events) که اغلب برای استریم داده‌های مالی استفاده می‌شوند، از قابلیت‌های دسته‌بندی خودکار React 18 بهره زیادی می‌برند. به‌روزرسانی‌های دریافت شده از طریق SSE به طور خودکار دسته‌بندی می‌شوند و از رندرهای مجدد غیرضروری جلوگیری می‌کنند.

نتیجه‌گیری

دسته‌بندی در React یک تکنیک بهینه‌سازی بنیادی است که می‌تواند به طور قابل توجهی عملکرد اپلیکیشن‌های شما را بهبود بخشد. با درک نحوه کار دسته‌بندی و پیاده‌سازی استراتژی‌های بهینه‌سازی موثر، می‌توانید رابط‌های کاربری کارآمد و واکنش‌گرایی بسازید که تجربه کاربری عالی را ارائه می‌دهند، صرف نظر از پیچیدگی اپلیکیشن شما یا موقعیت مکانی کاربران شما. از دسته‌بندی خودکار در React 18 گرفته تا تکنیک‌های پیشرفته مانند requestAnimationFrame و flushSync، React مجموعه غنی از ابزارها را برای تنظیم دقیق به‌روزرسانی‌های state و به حداکثر رساندن عملکرد فراهم می‌کند. با نظارت و بهینه‌سازی مداوم اپلیکیشن‌های React خود، می‌توانید اطمینان حاصل کنید که آن‌ها برای کاربران در سراسر جهان سریع، واکنش‌گرا و لذت‌بخش باقی می‌مانند.